import 'package:api/pages/apps/firstCompanyApp/model/video_model.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class FindVideoItemPage extends StatefulWidget {
  final String value;
  final VideoModel videoModel;
  FindVideoItemPage(this.value, this.videoModel);
  @override
  _FindVideoItemPageState createState() => _FindVideoItemPageState();
}

class _FindVideoItemPageState extends State<FindVideoItemPage> {
  // 创建视频播放器
  VideoPlayerController videoPlayerController;
  // 控制更新视频加载初始化完成状态更新
  Future videoPlayFuture;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print(widget.videoModel.videoUrl);
    videoPlayerController =
        VideoPlayerController.network(widget.videoModel.videoUrl);
    videoPlayFuture = videoPlayerController.initialize().then((_) {
      // 视频初始化完成
      // 调用播放
      videoPlayerController.play();
      setState(() {});
    });
    setState(() {});
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    // 页面销毁的时候，销毁播放的视频
    videoPlayerController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 播放视频
        buildVideoWidget(),
        // 控制播放视频按钮
        buildControlWidget(),
        // 底部区域的视频介绍
        buildBottomFlagWidget(),
        // 右侧的用户信息按钮区域
        buildRightUserWidget(),
      ],
    );
  }

  Widget buildVideoWidget() {
    return FutureBuilder(
        future: videoPlayFuture,
        builder: (BuildContext context, value) {
          if (value.connectionState == ConnectionState.done) {
            return InkWell(
                onTap: () {
                  if (videoPlayerController.value.isInitialized) {
                    if (videoPlayerController.value.isPlaying) {
                      videoPlayerController.pause();
                    } else {
                      videoPlayerController.play();
                    }
                    setState(() {});
                  } else {
                    videoPlayerController = VideoPlayerController.network(
                        widget.videoModel.videoUrl);
                    videoPlayFuture =
                        videoPlayerController.initialize().then((_) {
                      // 视频初始化完成
                      // 调用播放
                      videoPlayerController.play();
                      setState(() {});
                    });
                  }
                },
                child: Center(
                  child: AspectRatio(
                    aspectRatio: videoPlayerController.value.aspectRatio,
                    child: VideoPlayer(videoPlayerController),
                  ),
                ));
          } else {
            return Container(
                alignment: Alignment.center,
                child: CircularProgressIndicator());
          }
        });
  }

  buildControlWidget() {
    Widget itemWidget = Container();
    if (videoPlayerController.value.isInitialized &&
        !videoPlayerController.value.isPlaying) {
      itemWidget = InkWell(
        borderRadius: BorderRadius.all(
          Radius.circular(22),
        ),
        onTap: () {
          if (!videoPlayerController.value.isPlaying) {
            videoPlayerController.play();
            setState(() {});
          }
        },
        child: Container(
          width: 44,
          height: 44,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(
              Radius.circular(22),
            ),
          ),
          child: Icon(Icons.play_arrow),
        ),
      );
    }
    return Align(
      alignment: Alignment(0, 0),
      child: itemWidget,
    );
  }

  buildBottomFlagWidget() {
    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(
        height: 180,
        color: Color(0x20ffffff),
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "GGB",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 17,
                  fontWeight: FontWeight.w500),
            ),
            SizedBox(height: 14),
            Text(
              "这是我在flutter发布的第一个视频，欢迎来看",
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.normal),
            ),
          ],
        ),
      ),
    );
  }

  buildRightUserWidget() {
    return Align(
      alignment: Alignment(1, 0),
      child: Container(
        width: 60,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 用户信息
            buildUserItem(),
            // 喜欢
            // 评论
            // 转发
          ],
        ),
      ),
    );
  }

  buildUserItem() {
    return Container(
      width: 60,
      height: 60,
      child: Stack(children: [
        Align(
          alignment: Alignment(0, 0),
          child: ClipOval(
            child: Container(
                width: 44,
                height: 44,
                color: Colors.grey,
                child: CachedNetworkImage(
                  fit: BoxFit.cover,
                  imageUrl: widget.videoModel.videoImage,
                  placeholder: (context, url) => CircularProgressIndicator(),
                )),
          ),
        ),
        widget.videoModel.isAttention
            ? Container()
            : Align(
                alignment: Alignment(0, 1),
                child: Container(
                  alignment: Alignment.center,
                  width: 18,
                  height: 18,
                  child: Text("+",
                      style: TextStyle(color: Colors.white, fontSize: 16)),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.all(Radius.circular(9)),
                  ),
                ),
              ),
      ]),
    );
  }
}
